import ModelSelect from "~/Settings/ModelSelect/index.vue";
import UIButton from "@/components/UI/Button/index.vue";
import { NImage } from "naive-ui";
import { SelectBaseOption } from "naive-ui/es/select/src/interface";
const activeMenu = ref<SettingsFormKey>("general");
export const useSettingsMenu = () => {
  const menus: SettingsMenuList = [
    {
      name: "通用设置",
      icon: "AdjustmentsHorizontal",
      key: "general",
      description: "通用设置",
    },
    {
      name: "函数设置",
      icon: "Function",
      key: "function",
      description: "函数设置",
    },
    {
      name: "AI 设置",
      icon: "SettingsAutomation",
      key: "aiSetting",
      description: "AI设置",
    },
    {
      name: "显示设置",
      icon: "DeviceDesktopAnalytics",
      key: "display",
      description: "显示设置",
    },
  ];
  const handleClickMenu = (key: SettingsFormKey) => {
    activeMenu.value = key;
  };

  const getActiveMenu = computed(() => activeMenu);
  const { settings, addProvider, getProviderSettingByLabel } = settingsStore();
  const getForm = computed(
    () =>
      ({
        function: [],
        general: [],
        aiSetting: [
          {
            title: "API 设置",
            description: "API设置",
            schemas: [
              {
                field: "nowProviderName",
                component: "select",
                label: "提供商",
                placeholder: "提供商",
                defaultValue: "openai",
                description: "提供商",
                size: "small",
                showFeedback: false,
                tag: true,
                filterable: true,
                renderLabel: (option: SelectBaseOption) => {
                  return (
                    <div class="flex justify-between items-center h-full w-full">
                      {option.label}
                      <NImage
                        width={
                          getProviderSettingByLabel(option.label as PROVIDES)
                            ?.ICON_WIDTH
                        }
                        src={
                          new URL(
                            getProviderSettingByLabel(
                              option.label as PROVIDES
                            )!.ICON_URL,
                            import.meta.url
                          ).href
                        }
                      />
                    </div>
                  );
                },
                onUpdate: (value: string) => {
                  if (
                    settings.aiSetting.value.find(
                      (item) => item.PROVIDES === value
                    )
                  ) {
                    return;
                  }
                  addProvider(value);
                },
                options: settings.aiSetting.value.map((item) => ({
                  label: item.PROVIDES,
                  value: item.PROVIDES,
                })),
              },
            ],
          },
          {
            schemas: [
              {
                field: "API_URL",
                component: "input",
                label: "API 地址",
                placeholder: "API 地址",
                defaultValue: "",
                description: "API_URL是openai的请求地址",
                size: "small",
                showFeedback: true,
                feedbackRender: (provider: ProviderValue) => (
                  <UIButton
                    onClick={() => (provider.API_URL = provider.DEFAULT_URL)}
                    size="tiny"
                    textColor="green"
                    text
                  >
                    恢复默认
                  </UIButton>
                ),
              },
              {
                field: "API_KEY",
                component: "input",
                label: "API 密钥",
                placeholder: "API 密钥",
                defaultValue: "",
                description: "API_KEY是访问openai的请求凭证",
                size: "small",
                type: "password",
              },
              {
                field: "MODELS",
                render: () => h(ModelSelect),
                showFeedback: false,
              },
            ],
          },
        ],
        display: [
          {
            title: "布局设置",
            description: "布局设置",
            schemas: [
              {
                field: "layout",
                component: "select",
                label: "布局类别",
                placeholder: "布局类别",
                defaultValue: "compact",
                description: "布局类别",
                size: "small",
                showFeedback: false,
                options: [
                  {
                    label: "紧凑模式",
                    value: "compact",
                  },
                  {
                    label: "松散模式",
                    value: "loose",
                  },
                ],
              },
            ],
          },
        ],
      }) as Record<SettingsFormKey, FormProps[]>
  );
  return {
    menus,
    handleClickMenu,
    getActiveMenu,
    getForm,
  };
};
